<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>加办</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/include/css/style.css">
  <style>
    #msgContent{
      display: none;
    }
  </style>
</head>
<body class="white-bg" style="height: 95%">

<div>
  <table class="form-table">

    <tr>
      <th>
        <span class="required">*</span><span>加办人：</span>
      </th>
      <td>
        <span id="username"></span>
        <a class="btn btn-primary btn-sm" onclick="checkUser()"><i class="fa fa-search"></i> 选择用户</a>
      </td>
    </tr>
    <tr>
      <th>
        <span class="required">*</span><span>加办原因：</span>
      </th>
      <td>
        <textarea id="opinion" style="resize: none;" rows="4" cols="20" class="form-control"></textarea>
      </td>
    </tr>
    <tr>
      <th>提醒消息： </th>
      <td>
        <label class="check-box">
          <input type="checkbox" name="msgType" value="weixin" class="fl mt3 mr5"/>公众号推送
        </label>
        <label class="check-box">
          <input type="checkbox" name="msgType" value="email" class="fl mt3 mr5"/>邮件
        </label>
        <label class="check-box">
          <input type="checkbox" name="msgType" value="dingding" class="fl mt3 mr5"/>钉钉消息
        </label>
        <label class="check-box">
          <input type="checkbox" name="msgType" value="sms" class="fl mt3 mr5"/>短信
        </label>
      </td>
    </tr>
    <tr id="msgContent">
      <th><span>消息内容：</span></th>
      <td>
        <p><span class="text-muted">您有一条新的转办任务，请及时办理。 转办备注为：</span><span id="remark"></span>。</p>
        <p><span class="text-muted">流程标题为：</span>${流程标题}</p>
      </td>
    </tr>
  </table>
</div>


<script src="/static/include/js/footer.js"></script>
<script>
  var userRows = []
  $(function () {
    $("#opinion").bind("input propertychange",function(event){
      $('#remark').text($("#opinion").val())
    });
    $(".check-box").click(function(e){
      e.stopPropagation();
      e.preventDefault();
      if ($("input[name='msgType']:checked").length > 0){
        $('#msgContent').show()
      }else{
        $('#msgContent').hide()
      }
    });
  })
  function checkUser() {
    var url = './userTable';
    var options = {
      title: '选择转交人',
      url: url,
      callBack: doSubmitUser
    };
    var userIds = []
    userRows.forEach(function (user) {
      userIds.push(user.id)
    })
    $.modal.openOptionsInitData(options, userIds);
  }

  function doSubmitUser(index, layero) {
    var iframeWin = window[layero.find('iframe')[0]['name']];
    var rows = iframeWin.$('#bootstrap-table').bootstrapTable('getSelections');
    userRows = []
    rows.forEach(function (row) {
      userRows.push({
        name: row.username,
        id: row.user_id,
        type: 'user'
      })
    })
    formatSr()
    layer.close(index);
  }

  function formatSr() {
    var userTemp = []
    userRows.forEach(function (user) {
      userTemp.push(user.name || user.receiverUserName)
    })
    $("#username").html(userTemp.length == 0 ? "未选择" : userTemp.join("，"))
  }

  function submitHandler() {
    if (!userRows.length){
      $.modal.msgWarning('请选择加办人！')
      return false
    }
    if (!$('#opinion').val()){
      $.modal.msgWarning('请填写加办原因！')
      return false
    }
    parent.window.nowButton.opinion =  $('#opinion').val()
    parent.window.nowButton.configPage = ''
    var data = {
      users: userRows
    }
    parent.window.bpmParams = Object.assign({}, parent.window.bpmParams, {extendConf: data})
    parent.window.postFn(parent.window.nowButton)
  }
</script>
</body>
</html>
